<template>
    <div class="search">
        <p-back>
            <div class="head">            
                <p class="search-name">搜索</p>
                <!-- <div class="head-right">
                    <span class="area">深圳</span>
                    <svg class="icon search-icon" aria-hidden="true">
                        <use xlink:href="#icon-icon--"></use>
                    </svg>
                </div> -->
            </div>
        </p-back>
        <div class="content">
            <div class="search-input">
                <svg class="icon search-icon" aria-hidden="true">
                    <use xlink:href="#icon-sousuo"></use>
                </svg>
                <input  type="text" class="input-content" 
                        placeholder="请输入搜索宠物种类" 
                        ref="keyword" 
                        v-model="searchValue" 
                        @click="showCloseIcon()"
                        >
                <van-icon name="close" color="#b6aab6" v-show="this.showClose" @click="clearSearchValue()"/>
                <span style="width:40px" @click="handleSearch()">搜索</span>
                <!-- <svg class="icon search-icon" aria-hidden="true" @click="gotoFilter()">
                    <use xlink:href="#icon-filter"></use>
                </svg> -->
            </div>
            <div class="history">
                <div class="history-head">
                    <p>搜索历史</p>
                    <p @click="clearHistory()">清空</p>
                </div>
                <div class="history-content" v-if="history.length">
                    <div v-for="(item,index) in history" :key="index" class="history-item" @click="copy(item)">{{item}}</div>
                </div>
                <p v-else class="no-history">暂无数据...</p>
            </div>
        </div>
        
    </div>
</template>
<script>
import pBack from '@/components/back'
export default {
    data() {
        return {
            showClose:false,
            searchValue:'',
            history:[],
        }
    },
    components:{
        pBack
    },
    created() {
        this.getHistory()
    },
    beforeMount(){
    document.addEventListener('click',e=>{
            if(e.target.className!='input-content'){
                this.showClose = false
            }
        })
    },
    methods:{
        gotoFilter(){
            this.$router.push('/filter')
        },
        clearSearchValue() {
            this.searchValue = ''
        },
        showCloseIcon() {
            this.showClose = true
        },
        handleSearch(){
            this.setHistorys()
            this.$router.push(`/search_petlist?searchValue=${this.searchValue}`)
        },
        //历史记录回到搜索框
        copy(value) {
            this.searchValue = value
        },
        // 添加历史记录
        setHistorys() {
            //搜索框有内容不在历史记录里
            if(this.searchValue && this.searchValue !=='' && this.searchValue !=='  ' && this.history.indexOf(this.searchValue)){
                let Arr = Array.from(new Set(this.history))
                this.history = [this.searchValue,...Arr]
            }
            //历史记录只保存6条
            if(this.history && this.history.length && this.history.length > 6) {
                this.history = this.history.slice(0,6)
            }
            localStorage.setItem('historys',JSON.stringify(this.history))
        },
        // 获取历史记录
        getHistory() {
            let history = localStorage.getItem('historys')
            if(history) {
                this.history = JSON.parse(history)
            }
        },
        //删除历史记录
        clearHistory(){
            this.history = []
            localStorage.removeItem('historys')
        } 
        
    }
}
</script>
<style lang="less" scoped>
.search{
    background-image: linear-gradient(-30deg, rgba(255,0,0,0),rgba(255,0,0,0),rgba(255,0,0,0),rgba(255,0,0,0),#ffd6eab6,#d0e6ff);
    height: 100%;
    .content{
        padding: 0 0.5rem 0.5rem;
        .history{
            margin-top: 0.5rem;
            .history-head{
                display: flex;
                justify-content: space-between;
            }
            .history-content{
                display:flex;
                flex-wrap: wrap;
                padding-top: 0.5rem;
                .history-item{
                    margin-right: 0.3rem;
                    margin-bottom: 0.3rem;
                    border-radius: 0.15rem;
                    border: 1px solid #aac9ee;
                    font-size: 0.3rem;
                    padding: 0.25rem;
                    text-align: center;
                    color: #857f85;
                }:hover{
                    color: white;
                    background: #aac9ee;
                }
            }
            .no-history{
                display: flex;
                justify-content: center;
                color: #857f85;
                font-size: 0.45rem;
                margin-top: 1rem;
            }
        }
        .search-input {
                position: relative;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-bottom: 0.1rem solid #ddd;
                border-image: linear-gradient(to right, rgb(245, 207, 35) ,rgb(230, 97, 185)) 30 20;
                .input-content{
                    width: 90%;
                    background: none;
                    font-size: 0.4rem;
                }
                .van-icon {
                    font-size: 0.6rem;
                    position: absolute;
                    right: 1rem;
                }
            }
    }
    
    .head{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        .search-name{
            font-size: 0.5rem;
        }
        .head-right{
            display: flex;
            align-items: center;
            
        }
    }
}
.search-icon{
    width: 0.8rem;
}
</style>